<template>
  <div class="mx-2 p-4 shadow-lg shadow-gray-600 rounded-lg overflow-hidden">
    <div class="flex items-center my-4 pb-2">
      <svg
        class="w-6 h-6 text-emerald-500"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M11 19l-7-7 7-7m8 14l-7-7 7-7"
        ></path>
      </svg>
      <h3 class="text-xl px-2 cursor-pointer" @click="router.back()">返回</h3>
    </div>
    <ZForm
      ref="form"
      :model="values"
      :rules="rules"
      autocomplete="off"
      @success="onSuccess"
    >
      <ZFormItem name="title" label="标题" outline>
        <ZInput name="title" v-model="values.title" />
      </ZFormItem>
      <ZFormItem name="sketch" label="简述" outline>
        <ZTextarea name="sketch" v-model="values.sketch" rows="5"></ZTextarea>
      </ZFormItem>
      <ZFormItem name="priority" label="优先级" outline>
        <div class="flex items-center space-x-4 p-2">
          <ZInputRadio
            v-for="(val, key) in TodoPriority"
            name="priority"
            :label="val"
            :key="key"
            :value="key"
            v-model="values.priority"
          />
        </div>
      </ZFormItem>
      <ZFormItem name="description" label="" outline>
        <ZMdEditor v-model="values.description" :height="400" width="100%" />
      </ZFormItem>
      <ZButton type="submit" class="w-full tracking-widest">保存</ZButton>
    </ZForm>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onActivated } from "vue";
import { useRouter, useRoute } from "vue-router";

import { Rules, Values } from "@/pkg/validate";
import ZForm from "@/pkg/forms/ZForm.vue";

import { useTodosStore } from "@/stores/todos";
import { Todo } from "@/components/types";

const todosStore = useTodosStore(),
  router = useRouter(),
  route = useRoute();
/* ts 类型操作，Pick选取某些属性做新类型。 */
type TodoCanEdit = Pick<Todo, "title" | "sketch" | "priority" | "description">;

const TodoPriority = {
  Normal: "一般",
  Important: "重要",
  Crucial: "至关重要",
};

const defaultValues = {
    title: "",
    sketch: "",
    priority: "Normal",
    description: "",
  },
  values = reactive<TodoCanEdit>(Object.assign({}, defaultValues)),
  rules: Rules = {
    title: [
      {
        required: true,
      },
      {
        minLength: 3,
        maxLength: 100,
        message: "标题必须在3到100个字符之间",
      },
    ],
    sketch: [
      {
        required: true,
        message: "简述不能为空",
      },
      {
        minLength: 3,
        maxLength: 255,
        message: "简述必须在3到255个字符之间",
      },
    ],
  },
  form = ref<InstanceType<typeof ZForm>>();

const onSuccess = async (todo: Values) => {
  // ajax 发送 FormData 数据
  const data =
    route.name == "todos.new"
      ? await todosStore.addTodo(todo)
      : await todosStore.editTodo(todo);
  // 设置表单错误显示
  if (data?.errors) form.value?.setErrors(data.errors);
  if (data?.success) router.replace({ name: "todos.list" });
};
// 组件激活
onActivated(() => {
  if (route.name == "todos.new") Object.assign(values, defaultValues);
  else {
    if (todosStore.selected) Object.assign(values, todosStore.selected);
    else router.replace({ name: "todos.list" });
  }
});
</script>
<style>
/* .bytemd {} */
</style>
